<template>
	<li>
		<!-- 修改中 -->
		<template v-if="isEditing">
            <input type="text" name="" v-model="editingValue">
            <button @click="onEditOk">确认</button>
        </template>
        <!-- 没修改中 -->
		<template v-else>
            {{ value }}
            <button @click="isEditing = true">修改</button>
        </template>
        <button @click="onDelete">删除</button>
	</li>
</template>

<script>
export default {
	props: {
		value:  String,
		id: Number,
        editingId: Number,
	},
	data() {
		return {
            editingValue: this.value,
            isEditing: false,
        };
	},
	methods: {
		onDelete() {
			this.$emit("onDelete", this.id);
		},
        // 确认修改
        onEditOk(){
            this.$emit("onEditOk", this.id, this.editingValue);
            this.isEditing= false;
        }
	},
};
</script>

<style scoped>
</style>